<template>
  <screen-cell :title="'报警信息统计'">
    <div class="container">
      <div class="sidebar fy-flex fy-flex__center fy-flex__column">
        <div class="cell">
          <screen-title :title="'今日设备报警次数'"></screen-title>
          <screen-num :num="'0' + num"></screen-num>
        </div>
      </div>
      <div class="content">
        <div class="title" :style="{width: '20vw', height:'4vh'}"><p>·报警次数分布·</p></div>
        <div ref="warning-charts" :style="{width: '20vw', height:'21vh'}"></div>
      </div>
    </div>
  </screen-cell>
</template>

<script>
import ScreenCell from "@/components/common/ScreenCell.vue";
import ScreenTitle from "@/components/common/ScreenTitle.vue";
import ScreenNum from "@/components/common/ScreenNum.vue";
export default {
  // 全局感知
  name: "",

  // 模板依赖
  components: {
    ScreenCell,
    ScreenTitle,
    ScreenNum
  },
  filters: {},

  // 接口
  props: {},

  // 本地状态
  data() {
    return {
      num: 256,
      fontSize: 16
    };
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    setInterval(() => {
      this.num += 3;
    }, 5000);
    this.initRemData();
    this.initData();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {
    initRemData() {
      let clientWidth = document.documentElement.clientWidth;
      if (clientWidth === undefined) return;
      this.fontSize = clientWidth / 220;
    },
    initData() {
      let chart = this.$echarts.init(this.$refs["warning-charts"]);
      let fontSize = this.fontSize * 1;
      let option = {
        color: ["#00b7ee"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [
              "火灾报警",
              "喷淋",
              "水位水箱",
              "电气火灾",
              "可燃气体",
              "充电桩",
              "消防栓",
              "烟感"
            ],
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: "#0295b6",
                width: this.fontSize > 10 ? this.fontSize * 0.1 : 1
              }
            },
            axisLabel: {
              color: "white",
              interval: 0,
              fontSize: fontSize
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#0295b6"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#0295b6",
                width: this.fontSize > 10 ? this.fontSize * 0.1 : 1
              }
            },
            axisLabel: {
              color: "white",
              fontSize: fontSize
            }
          }
        ],
        series: [
          {
            name: "次数",
            type: "bar",
            barWidth: "40%",
            label: {
              normal: {
                show: true,
                color: "#01e7f0",
                position: "top",
                fontSize: fontSize
              }
            },
            data: [
              {
                name: "火灾报警",
                value: 125,
                itemStyle: {
                  color: "#00b7ee"
                }
              },
              {
                name: "喷淋",
                value: 84,
                itemStyle: {
                  color: "#bacf95"
                }
              },
              {
                name: "水位水箱",
                value: 120,
                itemStyle: {
                  color: "#3ace00"
                }
              },
              {
                name: "电气火灾",
                value: 90,
                itemStyle: {
                  color: "#ee8600"
                }
              },
              {
                name: "可燃气体",
                value: 120,
                itemStyle: {
                  color: "#ee0000"
                }
              },
              {
                name: "充电桩",
                value: 130,
                itemStyle: {
                  color: "#00b7ee"
                }
              },
              {
                name: "消防栓",
                value: 75,
                itemStyle: {
                  color: "#bc6aff"
                }
              },
              {
                name: "烟感",
                value: 120,
                itemStyle: {
                  color: "#ffea00"
                }
              }
            ]
          }
        ]
      };
      chart.setOption(option, true);
    }
  }
};
</script>

<style  lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 25.5vh;
  .sidebar {
    float: left;
    width: 35%;
    height: 100%;
    color: white;
    p {
      font-weight: 900;
      font-size: 3rem;
    }
    span {
      margin-left: 0.5rem;
      font-size: 2.5rem;
    }
  }
  .content {
    position: relative;
    float: left;
    width: 65%;
    height: 100%;
    .title {
      position: relative;
      width: 100%;
      p {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 1.8rem;
        color: #bccbf1;
      }
    }
  }
}
</style>
